<template>
  <div>
    <page-dialog
      v-show="handleMaintenanceInfo.visible"
      :title="handleMaintenanceInfo.title"
      v-model:visible="handleMaintenanceInfo.visible"
      :width="handleMaintenanceInfo.width"
      :bt-loading="handleMaintenanceInfo.btLoading"
      :bt-list="handleMaintenanceInfo.btList"
      @reset="handleCloseHandleMaintenance"
    >
      <el-form
        :model="handleMaintenanceInfo.tableInfo"
        ref="tableForm"
        style="width: 100%"
      >
        <!-- 表格 -->
        <dialog-table
          ref="mountingsUseTable"
          :refresh="handleMaintenanceInfo.tableInfo.refresh"
          :init-curpage="handleMaintenanceInfo.tableInfo.initCurpage"
          v-model:data="handleMaintenanceInfo.tableInfo.data"
          :api="handleMaintenanceInfo.tableInfo.api"
          :query="handleMaintenanceInfo.tableInfo.query"
          :pager="false"
          :tabIndex="true"
          :check-box="false"
          :field-list="handleMaintenanceInfo.tableInfo.fieldList"
          :row-class-name="handleMaintenanceInfo.tableRowClassName"
          @handleEvent="handleEventItems"
        >
          <template v-slot:col-result="scope">
            <radio-model
              v-model="scope.row.result"
              typeCode="appearance_quality"
              class="form-input"
            />
          </template>
          <template v-slot:col-remark="scope">
            <el-form-item
              class="form-input"
              :prop="`data.${scope.$index}.remark`"
            >
              <el-input v-model="scope.row.remark"> </el-input>
            </el-form-item>
          </template>
        </dialog-table>
      </el-form>
    </page-dialog>
  </div>
</template>
<script setup name="handleMaintenance">
import PageDialog from '@/components/PageDialog/index'
import DialogTable from '@/components/DialogTable/index'
import {
  getDeviceMaintenanceTaskProgramAll,
  updateBatchListDeviceMaintenanceTaskProgram,
} from '@/api/repair.js'
import RadioModel from '@/components/ModelRadio'

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps(['visible', 'row'])

//配件使用相关
const handleMaintenanceInfo = reactive({
  orderId: '',
  visible: false,
  title: '养护执行',
  btLoading: false,
  type: '',
  msg: '',
  width: '75%',
  flag: true,
  btList: [
    {
      label: '关闭',
      event: handleCloseHandleMaintenance,
      show: true,
    },
    {
      label: '保存',
      type: 'primary',
      event: saveHandleMaintenance,
      show: true,
    },
  ],
  // 过滤相关配置
  filterInfo: {
    query: {
      customizeUserVO: {},
      queryMap: {},
    },
    list: [
      { label: '添加项目', type: 'button', event: addItem },
      { type: 'slot', value: 'removeItem' },
    ],
  },
  // 表格相关
  tableInfo: {
    refresh: 1,
    initCurpage: 1,
    api: getDeviceMaintenanceTaskProgramAll,
    query: {
      orderId: props.row.id,
    },
    data: [],
    selections: [],
    fieldList: [
      {
        label: '养护部位',
        value: 'maintenanceParts',
        // type: "slot",
      },
      {
        label: '养护内容与要求',
        value: 'contentRequire',
        // type: "slot",
      },
      {
        label: '养护结果',
        value: 'result',
        type: 'slot',
      },
      {
        label: '备注',
        value: 'remark',
        type: 'slot',
      },
    ],
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

watch(
  () => props.visible,
  (newVal) => {
    handleMaintenanceInfo.visible = newVal
  },
  {
    immediate: true,
  }
)
watch(
  () => props.row,
  (newVal) => {
    handleMaintenanceInfo.tableInfo.query.orderId = newVal.id
  },
  {
    immediate: true,
  }
)
handleMaintenanceInfo.tableInfo.refresh = Math.random()
onMounted(() => {
  setTimeout(() => {
    getItemsList()
  }, 100);
})

function handleEventItems(event, data) {
  switch (event) {
    case 'tableCheck':
      handleMaintenanceInfo.tableInfo.selections = data
      break
  }
}
function handleCloseHandleMaintenance() {
  emit('callbackHandleMaintenance', false)
}
function getItemsList() {
  handleMaintenanceInfo.tableInfo.refresh = Math.random()
}
function saveHandleMaintenance() {
  updateBatchListDeviceMaintenanceTaskProgram(
    handleMaintenanceInfo.tableInfo.data
  ).then((resp) => {
    if (resp && resp.success) {
      emit('callbackHandleMaintenance', false)
    }
  })
}
function addItem() {}
</script>
